課程目的:

這次的內容是做出右邊的速度調功能去調整影片的速度
作品實做

本次功能實作重點：

• 選取Dom元素以及監聽
• 控制影片速度功能

選取Dom元素以及監聽

      const target = document.querySelector(".speed"); //速度條
      const bar = document.querySelector(".speed-bar"); //速度調調整杆
      const video = document.querySelector(".flex"); //影片
      
      
      target.addEventListener("mousemove", moveHandler); //當速度調監聽到滑鼠滑動，執行moveHandler函式

控制影片速度功能

  function moveHandler(e) {
        let y = e.pageY - this.offsetTop;　//滑動的量(當前滑動的位置-target與頂部的偏移量)
        let percent = y / this.offsetHeight; //滑動的量在速度條的比例
        
        //設定畫面中速度條的%數
        let height = Math.round(percent * 100) + "%"; 
        bar.style.height = height; 
        
        //設定速度範圍在0.5~2
        percent = percent * 1.5 + 0.5; //0.5-2 
        percent = percent > 2 ? 2 : percent < 0.5 ? 0.5 : percent;
        
        //設定bar顯示的字以及影片的速度
        bar.textContent = percent.toFixed(2) + "x"; //只取到小數點第二位
        video.playbackRate = percent;
      }

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 28：Video Speed Controller
JS30